<template>
  <!-- TODO  -->
  <div class="newbox_container">
    <el-row style="background-color: #FFFFFF;margin-top: 10px;">
      <el-form ref="searchRef" :inline="true" :model="searchData" class="demo-form-inline" style="margin-left: 25px;">
        <el-form-item label="主机名">
          <el-input v-model="searchData.hostName" placeholder="主机名" />
        </el-form-item>
        <el-form-item label="日志级别">
          <el-select v-model="searchData.logLevel" placeholder="日志级别">
            <el-option label="信息" value="0" />
            <el-option label="警告" value="1" />
            <el-option label="错误" value="2" />
            <el-option label="调试" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" circle @click="handleRefresh" />
        </el-form-item>
      </el-form>
    </el-row>
    <el-table v-loading="loading" element-loading-text="正在加载中" :data="tableData" style="width: 100%" stripe>
      <el-table-column label="序号" width="80" type="index" align="center" />
      <el-table-column prop="hostName" label="主机名" width="120" />
      <el-table-column prop="recordeBy" label="记录者" width="180" />
      <el-table-column prop="logSource" label="来源" width="140" />
      <!-- 日志级别（0信息、1警告、2错误、3调试） -->
      <el-table-column prop="logLevel" label="日志级别" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.logLevel == 0" size="medium">信息</el-tag>
          <el-tag v-if="scope.row.logLevel == 1" size="medium" type="warning">警告</el-tag>
          <el-tag v-if="scope.row.logLevel == 2" size="medium" type="danger">错误</el-tag>
          <el-tag v-if="scope.row.logLevel == 3" type="info" size="medium">调试</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="详细信息" width="500">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" width="300">
            <p>详细信息: {{ scope.row.content }}</p>
            <div slot="reference" class="name-wrapper">
              <span :style="{'max-height': '40px', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'display': '-webkit-box', '-webkit-line-clamp': '2', 'line-clamp': '2', '-webkit-box-orient': 'vertical'}" size="medium">{{ scope.row.content }}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="180">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.logTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="修改日期" width="250">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.updateTime) }}</span>
        </template>
      </el-table-column> -->
      <template v-slot:empty>
        <div style="height: 200px;">
          <img src="../../../../assets/nodata.png" width="150" style="margin: 30px;">
        </div>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="size"
      :current-page.sync="page"
      :page-sizes="[10, 15, 20, 25, 100]"
      layout="sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getAllLog } from '@/api/log'
import { formatDate } from '@/utils/index.js'

export default {
  data() {
    return {
      tableData: [],
      searchData: {
        hostName: '',
        logLevel: ''
      },
      total: 0,
      size: 10,
      page: 1,
      loading: true
    }
  },
  mounted() {
    this.getAllLog()
  },
  methods: {
    formatDate,
    async handleRefresh() {
      this.loading = true
      this.searchData.hostName = ''
      this.searchData.logLevel = ''
      await this.getAllLog()
      this.loading = false
      this.size = 10
      this.page = 1
    },
    commonHandle(res) {
      this.tableData = res.records
      this.total = res.total
      this.size = res.size
      this.loading = false
    },
    async getAllLog() {
      if (this.searchData.hostName === '' && this.searchData.logLevel === '') {
        const res = await getAllLog(this.page, this.size)
        this.commonHandle(res)
      } else if (this.searchData.hostName === '') {
        const reqData = {
          logLevel: this.searchData.logLevel
        }
        const res = await getAllLog(this.page, this.size, reqData)
        this.commonHandle(res)
      } else if (this.searchData.logLevel === '') {
        const reqData = {
          hostName: this.searchData.hostName
        }
        const res = await getAllLog(this.page, this.size, reqData)
        this.commonHandle(res)
      } else {
        const res = await getAllLog(this.page, this.size, this.searchData)
        this.commonHandle(res)
      }
    },
    // 分页-size
    handleSizeChange(size) {
      this.loading = true
      this.size = size
      this.page = 1
      this.getAllLog()
    },
    // 分页-page
    handleCurrentChange(page) {
      this.loading = true
      this.page = page
      this.getAllLog()
    },
    // 条件查询
    async handleSearch() {
      this.$refs.searchRef.validate(async(valid) => {
        if (valid) {
          this.loading = true
          console.log('搜索', this.searchData)
          await this.getAllLog()
        }
      })
    }
  }
}
</script>

<style scoped>
.newbox_container {
  width: 99%;
}

.box-card {
  margin-top: 10px;
}
</style>
